<template>
  <div class="fixed top-0 left-0 bg-base-100 w-full h-full z-40 ">
    <!--顶部栏-->
    <div class="fixed z-50 flex justify-center items-center w-full h-[10vh] bg-primary  text-md">
      <div class="w-2/12 md:w-1/12 flex justify-center">
        <div @click="router.go(-1)" class="">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"/>
          </svg>
        </div>
      </div>
      <div class="w-10/12 md:w-10/12 flex justify-start pl-2">
        设置
      </div>
    </div>
    <!--内容-->
    <div class="overflow-y-auto w-full h-[90vh] fixed top-[10vh] left-0">
      <div class="flex flex-col justify-center items-center w-full ">
        <div class="max-w-screen-xl w-full bg-base-100 shadow-2xl flex flex-col justify-center items-center border">
          <div @click="editUser()" class="max-w-md w-full  text-left p-4 my-4 btn">修改个人信息</div>
          <div @click="editPassword()" class="max-w-md w-full  text-left p-4 my-4 btn">修改密码</div>
          <div @click="logout()" class="max-w-md w-full  text-left p-4 my-4 btn-error btn">退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../plugins/router.ts";
import {onBeforeMount, ref} from "vue";
import {hook_getUser} from "../hook/UserHook.ts";

let user = ref()
onBeforeMount(() => {
  user.value = hook_getUser();
})


function editUser() {
  router.push('/editUser')
}

function editPassword() {
  router.push('/editPassword')
}

function logout() {
  sessionStorage.removeItem('isAuthenticated')
  sessionStorage.removeItem('user')
  location.reload()
}
</script>

<style scoped>

</style>